<!-- 修改头像页面 -->
<template>
		<view >
				<!-- 自定义导航栏 -->
				<view>
					<u-navbar title="修改头像" @leftClick="leftClick" bgColor="#FFFFFF" height="30"></u-navbar>
					<u-gap height="30" bgColor="#F5F5F5" ></u-gap>
				</view>
				<!-- 头像上传 -->
			<view style="padding:55px">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" :multiple="false" width="300" height="300" >
					<image :src="filePath" mode="aspectFill" style="width: 300px;height: 300px;border-radius: 150px;"></image>
				</u-upload>
				<view>
				<!-- 重置按钮 -->
				<u-button type="primary" shape="circle" class="aaa" @click="deletes" text="重置"></u-button>
				<!-- 提交按钮 -->
				<u-button type="primary" shape="circle" class="aaa" @click="rightClick" text="确定"></u-button>
				</view style="padding: 20px;">
					</view>
		</view>
			
		
	
</template>

<script>
	export default {
			created() {
				/*用户详情*/
				this.UserAll();
			  },
			data() {
				return {
					fileList1: [],//存放图片信息
					file:'',//图片信息
					filePath:'',//图片路径
					fileId:{//修改对象(修改头像属性)
						userId:"",//参数1:用户id
						userFileId:"",//参数2:用户头像id
					}
				}
			},
			methods:{
				// 删除图片(未使用官方样板最好别动)
				deletePic(event) {
					// this[`fileList${event.name}`].splice(event.index, 1)
					this.fileList1.splice(event.index,1)
				},
				//重置图片
				deletes() {
					// this[`fileList${event.name}`].splice(event.index, 1)
					this.fileList1=[];
				},
				// 新增云端图片(前端部分官方样板最好别动)
				async afterRead(event) {
					// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					let lists = [].concat(event.file)
					let fileListLen = this[`fileList${event.name}`].length
					lists.map((item) => {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url)
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
				},
				//新增云端图片(请求部分基本是官方样板最好别动)
				uploadFilePromise(url) {
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'http://localhost:8090/login/User/testUpload', 
							filePath: url,
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								
								const fileData = JSON.parse(res.data)
								console.log(fileData.object)
								this.file = fileData.object
								console.log(this.file)
								setTimeout(() => {
									resolve(res.data.data)
								}, 1000)
							}
						})
					})
				},
				//保存图片并修改
				rightClick() {
					console.log("file的值：",this.file)
					//判断图片是否修改(修改了)
					if(this.file!=''){
					//将存入云端的图片信息存入数据库返回图片id
					uni.$u.http.post('http://localhost:8090/login/User/addPicture',this.file).then(res => {
						//保存头像id信息
						this.fileId.userFileId=res.data.object;
						console.log(this.fileId)
					//修改头像信息
					uni.$u.http.post('http://localhost:8090/login/User/updateUser',this.fileId).then(res => {
					if(res.data.state){
						console.log(res.data.msg);
					}
					//跳转回个人资料界面
					uni.redirectTo({
						url: '../me/personalData'
					});
				   });
					});
					//判断图片是否修改(未修改)
					}else{
						//跳转回个人资料界面
						uni.redirectTo({
							url: '../me/personalData'
						});
					}
				},
				/* 顶部导航栏左侧按钮点击事件 */
				leftClick() {
					//跳转回个人资料界面
					uni.redirectTo({
						url: '../me/personalData'
					})
				},
				
				/*用户详情*/
				UserAll() {
					//根据token获取当前登录用户信息
					uni.$u.http.post('http://localhost:8090/login/User/selectById',sessionStorage.getItem("token")).then(res => {
						//对象(修改头像属性)头像id赋值
						this.fileId.userFileId=res.data.object.userFileId;
						//对象(修改头像属性)参数用户id赋值
						this.fileId.userId=res.data.object.userId;
						//获取头像路径
						uni.$u.http.get('http://localhost:8090/login/User/pictureById/'+res.data.object.userFileId).then(res => {
							this.filePath=res.data.object
							})
					})
				},
							
							
							
							
							
							
						}
				
					}
</script>
					
<style lang="scss" scoped>
	/deep/ .u-upload__wrap__preview{
	    border-radius:150px;
	}
	.aaa{
		display:inline-flex;
	    // display:inline-block;
		width: 150px;
		height: 40px;
	}
</style>